<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Model Hub</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .header h1 {
            color: #333;
            margin-bottom: 10px;
        }
        .nav-bar {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            background-color: #333;
            padding: 10px;
            border-radius: 5px;
        }
        .nav-bar a {
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            margin: 0 10px;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .nav-bar a:hover {
            background-color: #555;
        }
        .nav-bar a.active {
            background-color: #4CAF50;
        }
        .nav-bar a.home {
            background-color: #FF9800;
        }
        .nav-bar a.home:hover {
            background-color: #F57C00;
        }
        .container {
            display: flex;
            gap: 20px;
        }
        .left-panel {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .right-panel {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .button-group {
            display: flex;
            gap: 10px;
            margin: 10px 0;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        button.secondary {
            background-color: #2196F3;
        }
        button.secondary:hover {
            background-color: #1976D2;
        }
        .input-group {
            margin-bottom: 20px;
        }
        .input-row {
            margin-bottom: 10px;
        }
        .input-row input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .error {
            color: red;
            padding: 10px;
            background: #fff3f3;
            border-radius: 4px;
            margin-top: 10px;
        }
        .model-item {
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Model Hub</h1>
        <p>API 端口: <span id="apiPort">8000</span></p>
    </div>
    
    <div class="nav-bar">
        <a href="/" class="home">首页</a>
        <a href="/models" class="active">模型管理</a>
        <a href="/datasets">数据集管理</a>
    </div>
    
    <div class="container">
        <div class="left-panel">
            <div class="section-title">模型列表</div>
            <div class="button-group">
                <button onclick="getModelList()">获取所有模型</button>
                <button class="secondary" onclick="getQwenConfig()">获取Qwen示例</button>
            </div>
            <div class="input-group">
                <input type="text" id="modelName" placeholder="模型名称">
                <button onclick="getModelConfig()">获取配置</button>
            </div>
            <pre id="modelConfig"></pre>
        </div>
        
        <div class="right-panel">
            <div class="section-title">模型配置</div>
            <div class="input-group">
                <input type="text" id="publisherName" placeholder="发布者名称">
                <input type="text" id="modelName" placeholder="模型名称">
                <input type="text" id="apiKey" placeholder="API密钥">
            </div>
            <div id="modelDetails"></div>
        </div>
    </div>

    <script>
        // 从URL获取当前端口
        function getCurrentPort() {
            // 如果URL中包含端口，则使用该端口
            if (window.location.port) {
                return window.location.port;
            }
            // 否则根据协议返回默认端口
            return window.location.protocol === 'https:' ? '443' : '80';
        }

        // 尝试从模板变量获取端口，如果不可用则使用当前URL的端口
        let externalPort = '{{ .externalPort }}';
        if (externalPort === '{{ .externalPort }}') {
            externalPort = getCurrentPort();
        }
        
        // 添加一个获取 API 基础 URL 的函数
        function getApiBaseUrl() {
            return window.location.protocol + '//' + window.location.hostname + ':' + externalPort;
        }

        // 页面加载时设置API端口显示
        window.onload = function() {
            document.getElementById('apiPort').textContent = externalPort;
            getModelList();
        };

        // 更新获取模型列表的函数
        async function getModelList() {
            try {
                // 尝试从模板变量获取API前缀，如果不可用则使用默认值
                let apiPrefix = '{{ .apiPrefix }}';
                if (apiPrefix === '{{ .apiPrefix }}') {
                    apiPrefix = '/api/v1';
                }
                
                const response = await fetch(getApiBaseUrl() + apiPrefix + '/apps');
                const data = await response.json();
                
                if (response.ok) {
                    // 创建模型列表显示
                    const modelListHtml = data.map(model => `
                        <div class="model-item">
                            <strong>${model.name}</strong>
                            <div>命名空间: ${model.namespace}</div>
                            <div class="button-group">
                                <button onclick="getModelConfig('${model.namespace}', '${model.name}', 'curl')">Curl</button>
                                <button onclick="getModelConfig('${model.namespace}', '${model.name}', 'python')">Python</button>
                            </div>
                        </div>
                    `).join('');
                    
                    document.getElementById('modelConfig').innerHTML = modelListHtml;
                } else {
                    document.getElementById('modelConfig').textContent = `Error: ${data.error}`;
                }
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('modelConfig').textContent = `Error: ${error.message}`;
            }
        }

        // 修改获取模型配置的函数
        async function getModelConfig(namespace, name, type = 'curl') {
            try {
                // 尝试从模板变量获取API前缀，如果不可用则使用默认值
                let apiPrefix = '{{ .apiPrefix }}';
                if (apiPrefix === '{{ .apiPrefix }}') {
                    apiPrefix = '/api/v1';
                }
                
                const response = await fetch(`${getApiBaseUrl()}${apiPrefix}/apps/${namespace}/${name}?type=${type}`);
                const data = await response.json();
                
                if (response.ok) {
                    // 在右侧面板显示详细配置
                    document.getElementById('modelDetails').innerHTML = `
                        <div style="margin-top: 20px;">
                            <h3>${data.name}</h3>
                            <div>命名空间: ${data.namespace}</div>
                            <div style="margin-top: 10px;">
                                <strong>Base URL:</strong>
                                <div>${data.config.base_url}</div>
                            </div>
                            <div style="margin-top: 10px;">
                                <strong>Headers:</strong>
                                <pre>${JSON.stringify(data.config.headers, null, 2)}</pre>
                            </div>
                            <div style="margin-top: 10px;">
                                <strong>${type.toUpperCase()} 示例:</strong>
                                <pre>${data.config[type]}</pre>
                            </div>
                        </div>
                    `;
                    
                    // 自动填充配置
                    document.getElementById('publisherName').value = data.namespace;
                    document.getElementById('modelName').value = data.name;
                } else {
                    document.getElementById('modelDetails').innerHTML = `<div class="error">Error: ${data.error}</div>`;
                }
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('modelDetails').innerHTML = `<div class="error">Error: ${error.message}</div>`;
            }
        }

        // Qwen配置快捷方式
        async function getQwenConfig() {
            await getModelConfig('qwen', 'qwen-vl-plus');
        }
    </script>
</body>
</html> 